<template>
  <Modal :value="value"
         title="title"
         :mask-closable="false"
         @on-cancel="close"
         :transfer="true"
         width='600'>
    <div slot="header">
      <h3>添加角色</h3>
    </div>
    <div>
      <Form ref="form"
            :model="form.data"
            :rules="form.rule"
            :label-width="100">
        <Row type="flex"
             justify="space-around">
          <i-col :span="18">

            <Form-item label="id："
                       prop="id"
                       style="display:none">
              <i-input v-model="form.data.id"></i-input>
            </Form-item>
            <Form-item label="角色名称："
                       prop="name">
              <i-input v-model="form.data.name"
                       placeholder="角色名称，建议以 ROLE_ 开头，如 ROLE_ADMIN"></i-input>
            </Form-item>
            <Form-item label="备注："
                       prop="remarks">
              <i-input v-model="form.data.remarks"
                       type="textarea"
                       placeholder="备注信息"></i-input>
            </Form-item>
            <Tree :data="treedata"
                  show-checkbox></Tree>
          </i-col>
        </Row>
      </Form>
    </div>
    <!-- 底部 -->
    <div slot="footer">
      <Button @click="close">关闭</Button>
      <Button type="primary"
              :loading="loading"
              v-if="mode==='add'"
              @click="add">添加</Button>
      <Button type="primary"
              :loading="loading"
              v-if="mode==='edit'"
              @click="edit">修改</Button>
    </div>
  </Modal>
</template>

<script>
import Form from './form'
import Service from './service'
import fullRoutes from '@/router/routes'
import PageFns from '../../../../../page-fns'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {},
  mounted () {
    this.getFns()
  },
  data () {
    return {
      form: Form,
      loading: false,

      treedata: [],
      fns: PageFns
    }
  },
  watch: {
    value (value) {
      this.$refs.form.resetFields()
      if (value) {
        if (this.mode === 'add') {
        } else {
          this.$set(this.form, 'data', {
            id: this.data.id,
            name: this.data.name,
            remarks: this.data.remarks
          })
        }
      }
    }
  },
  methods: {
    // 关闭
    close () {
      this.$emit('input', false)
    },
    // 添加
    add () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          Service.add(this.form.data).then(result => {
            this.loading = false
            if (result.isSuccess) {
              this.$Notice.success({
                title: '添加成功',
                desc: result.message
              })
              this.$emit('input', false)
              this.$emit('success', 'add')
            } else {
              this.$Notice.error({
                title: '添加失败',
                desc: result.message
              })
            }
          })
        } else {
          this.$Message.error('请检查输入的信息是否有误')
        }
      })
    },
    edit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          Service.edit(this.form.data).then(result => {
            this.loading = false
            if (result.isSuccess) {
              this.$Notice.success({
                title: '修改成功',
                desc: result.message
              })
              this.$emit('input', false)
              this.$emit('success', 'edit')
            } else {
              this.$Notice.error({
                title: '修改失败',
                desc: result.message
              })
            }
          })
        } else {
          this.$Message.error('请检查输入的信息是否有误')
        }
      })
    },
    getFns () {
      for (const key in PageFns) {
        if (PageFns.hasOwnProperty(key)) {
          PageFns[key].unshift({
            id: `${key}_1`,
            title: '页面访问',
            permission: 1
          })
          PageFns[key].forEach(element => {
            element.pageName = key
            element.label = element.name
            element.id = `${key}_${element.permission}`
            element.isFn = true
          })
        }
      }
      this.treedata.splice(
        0,
        this.treedata.length,
        ...this.getRoutes(fullRoutes)
      )
      // console.log(this.getRoutes(fullRoutes))
    },
    getRoutes (routes) {
      const res = []
      routes.forEach(route => {
        const tmp = { ...route }
        if (tmp.children) {
          tmp.children = this.getRoutes(tmp.children)
        }
        if (!tmp.children && this.needPermission(tmp)) {
          // 菜单
          const item = {
            id: tmp.name,
            title: tmp.meta.title
          }
          if (this.fns[tmp.name]) {
            item.children = []
            item.children.push(...this.fns[tmp.name])
          }

          res.push(item)
        }
        if (tmp.children && tmp.children.length) {
          res.push({
            id: tmp.name,
            title: tmp.meta.title,
            children: tmp.children
          })
        }
        // if (this.needPermission(tmp)) {
        // }
      })
      return res
    },
    needPermission (route) {
      console.log(route)
      console.log('1')
      if (route.children && route.children.length) {
        console.log('group permission')
        return true
      }
      console.log('2')
      if (route.meta && route.meta.permission) {
        console.log('menu permission')
        return true
      }
      console.log('not permission')
      return false
    }
  }
}
</script>

<style lang="less" scoped>
</style>
